<template>
  <RollbackOutlined :style="{ fontSize: '28px', color: '#999' }" @click="toBack" />
  <div class="wrap">
    <div v-for="(item, index) in processData.items" :key="index">
      <div class="item">
        <edit-item :index="index" :infoData="item" :isDisabled="isDisabled" @removeItem="removeItem(index)" @addItem="addNextItem(index)" ref="resetChild" />
      </div>
    </div>
  </div>
  <a-button type="primary" size="large" style="margin: 10px 0" @click="updateData" block>添加事件</a-button>
</template>
<script lang="ts">
import { RollbackOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'
import { defineComponent, reactive, computed, toRaw } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import EditItem from '../../../components/process/AddItem.vue'
import { post } from '../../../utils/request/request'

interface FormState {
  items: {
    title: string
    date: string
    type: number | undefined
    event_id: number | undefined
    number: number | undefined
    status: number | undefined
    process_id: number | undefined
  }[]
}

const processData: FormState = reactive({
  items: [
    {
      title: '', //事件名称
      date: '', //事件日期
      type: undefined, //事件类型：1.报名 2.面试 3.其他事件
      event_id: undefined, //时间ID，类型为面试时是面试id，问卷时是问卷id
      number: undefined,
      status: undefined, //状态：0.未开始，1.进行中，
      process_id: undefined //事件绑定的流程id
    }
  ]
})

// 子组件要调用的父组件方法
const useEmitEffect = () => {
  const removeItem = (index: number) => {
    processData.items.splice(index, 1)
  }
  const addNextItem = (index: number) => {
    const newItem = {
      title: '', //事件名称
      date: '', //事件日期
      type: undefined, //事件类型：1.报名 2.面试 3.其他事件
      event_id: undefined, //时间ID，类型为面试时是面试id，问卷时是问卷id
      number: undefined,
      status: undefined, //状态：0.未开始，1.进行中，1.已结束
      process_id: undefined //事件绑定的流程id
    }
    processData.items.splice(index + 1, 0, newItem)
  }
  return { removeItem, addNextItem }
}

// 网络请求相关的方法
const useHttpRequestEffect = (id: string, token: string) => {
  const router = useRouter()
  const putData = async () => {
    processData.items.forEach((item: any, index: number) => {
      item.number = index + 1
      item.process_id = Number(id)
    })
    console.log(toRaw(processData), '添加的数据')
    const res: any = await post(`/admin/api/v1/recruitment/process/item`, toRaw(processData), token)
    console.log(res, '返回的响应')
    if (res.status_code === 0) {
      message.success('添加成功')
      router.push({ name: 'processList' })
    } else {
      message.error('添加失败')
    }
  }
  return { putData }
}

export default defineComponent({
  components: {
    EditItem,
    RollbackOutlined
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const id = route.params.id as string
    const token: string = localStorage.getItem('token') as string
    const { removeItem, addNextItem } = useEmitEffect()
    const { putData } = useHttpRequestEffect(id, token)

    const toBack = () => {
      router.back()
    }

    const updateData = () => {
      putData()
    }

    return {
      blur,
      removeItem,
      processData,
      addNextItem,
      isDisabled: computed(() => (processData.items.length > 1 ? false : true)),
      toBack,
      updateData
    }
  }
})
</script>

<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .ant-modal-body {
    flex: 1;
  }
}
.ant-tabs-tab {
  max-width: 200px;
  // padding: 0 10px;
  overflow-x: auto; //超出的文本隐藏
  text-overflow: ellipsis;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
  }
}
.title {
  font-size: 30px;
  text-align: center;
  margin: 20px 0 10px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #c8c8c8;
}
// 去除默认outline
[contenteditable]:focus {
  outline: none;
}
.item {
  border: 1px solid #c8c8c8;
  border-radius: 10px;
  padding-top: 20px;
  margin: 10px 10px 0 10px;
}
</style>
